<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Users Rag chatbot</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

    <div class="container">

        <!-- 用户表格 -->
        <div class="row col-md-6 col-md-offset-3">
            <table class="table table-striped" id="user_table">
                <!-- 表头 -->
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>家乡</th>
                    </tr>
                </thead>
                <!-- 表体 -->
                <tbody>

                </tbody>
            </table>


            <!-- 提问框和提交按钮 -->
            <div class="row">
                <form name="aiForm">
                    <div class="from-group">
                        <label for="questionInput">提问</label>
                        <input 
                            type="text" 
                            id="questionInput" 
                            class="form-control" 
                            name="question" 
                            placeholder="请输入问题"
                            required
                        >
                    </div>
                    <button type="submit" class="btn btn-default" name="btn">查询</button>
                </form>
            </div>


            <!-- 显示回答 -->

            <div class="row" id = "message"></div>

        </div>

    </div>
    <script>
        // js 主动向后端发送数据接口请求
        // 前端向后端拉去数据
        const tableBody = document.querySelector('table tbody');
        const oForm = document.forms['aiForm'];
        let userData ;
        fetch('http://localhost:3001/users')
            // 数据到达前端 二进制 -》 json  
            .then(res => res.json())
            .then(users => {
                // console.log(data);
                userData = users;
                console.log(userData);
                for (let user of users) {
                    // console.log(user);
                    //创建一个表格行（<tr>）元素
                    const tr = document.createElement('tr');
                    // for in json 对象遍历
                    for (let key in user) {
                        //为每个属性值创建一个表格单元格（<td>）元素
                        const td = document.createElement('td');
                        td.innerText = user[key];
                        tr.appendChild(td);
                    }
                    // 将表格行添加到表格主体（<tbody>）中
                    tableBody.appendChild(tr)
                }
            })



        oForm.addEventListener('submit', e => {
            e.preventDefault(); // 阻止表单默认行为 , 改用fetch 向 Ai serevr 发送数据 接口请求
            // 在fetch 不刷新页面的情况下 向 Ai serevr 发送数据 接口请求
            // web 2.0 动态页面开发  ,js fetch 可以主动拉去数据 


            const question = oForm.question.value.trim();

            if (!question) {
                alert('请输入问题');
                return;
            }

            fetch(`http://localhost:1314/api?question=${question}&data=${JSON.stringify(userData)}`)
                .then(res => res.json())
                .then(data => {
                    //console.log(data); 
                    document.getElementById('message').innerText = data.result ;
                })
        })
    </script>
</body>

</html>
